<template>
  <div class="quick-date">
    <el-button :key="index" v-for="(item, index) in quickBtn" :type="(queryDateArr[0] == item.value[0] && queryDateArr[1] == item.value[1]) ? 'primary' : ''" @click="$emit('input', item.value)">{{ item.label }}</el-button>
    <el-date-picker
      class="picker"
      v-model="queryDateArr"
      type="daterange"
      range-separator="至"
      value-format="yyyy-MM-dd"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :pickerOptions="pickerOptions"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  props: {
    prop: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    labelWidth: {
      type: String,
      default: "",
    },
    value: {
      type: Array,
      default: () => [],
    },
    pickerOptions: {
      type: Object,
      default: null,
    },
    disableArr: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    const now = new Date()
    const nowDate = this.getDateString(now)
    const curTime = new Date(nowDate).getTime()
    const curYear = now.getFullYear()
    const curMonth = now.getMonth()

    return {
      // 当前时间
      nowDate: nowDate,
      // 今天
      value1: {
        label: "今天",
        value: [ this.getDateString(new Date(curTime)), this.getDateString(new Date(curTime + (1000 * 60 * 60 * 24))) ]
      },
      // 昨天
      value2: {
        label: "昨天",
        value: [ this.getDateString(new Date(curTime - (1000 * 60 * 60 * 24))), this.getDateString(new Date(curTime)) ]
      },
      // 近7天
      value3: {
        label: "近7天",
        value: [ this.getDateString(new Date(curTime - (1000 * 60 * 60 * 24 * 7))), this.getDateString(new Date(curTime)) ]
      },
      // 本月
      value4: {
        label: "本月",
        value: [ this.getDateString(new Date(curYear, curMonth, 1)), this.getDateString(new Date(curYear, curMonth + 1, 1)) ]
      },
      // 近30天
      value5: {
        label: "近30天",
        value: [ this.getDateString(new Date(curTime - (1000 * 60 * 60 * 24 * 30))), this.getDateString(new Date(curTime)) ]
      },
      // 近半年
      value6: {
        label: "近半年",
        value: [ this.getDateString(new Date(curTime - (1000 * 60 * 60 * 24 * 180))), this.getDateString(new Date(curTime)) ]
      },
      // 明天
      value7: {
        label: "明天",
        value: [ this.getDateString(new Date(curTime + (1000 * 60 * 60 * 24))), this.getDateString(new Date(curTime + (1000 * 60 * 60 * 24 * 2))) ]
      }
    };
  },
  computed: {
    queryDateArr: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit("input", value)
      }
    },
    // 显示快捷按钮
    quickBtn() {
      // 过滤掉禁用的快捷按钮
      const indexArr = [1,2,3,4,5,6,7].filter(index => !this.disableArr.includes(index))
      return indexArr.map(index => this['value' + index])
    }
  },
  methods: {
    getDateString(date) {
      return `${date.getFullYear()}-${ (date.getMonth() + 1).toString().padStart(2, 0) }-${ date.getDate().toString().padStart(2, 0) }`
    }
  }
};
</script>

<style lang="scss" scoped>
.quick-date {
  display: flex;
  .picker{
    margin-left: 10px;
  }
}
</style>
